<!--  -->
<template>
  <div class="Home">
    <div v-if="customerVisitFlag">
      <div class="allBox" >
        <div class="caseSearch">
          <div class="caseBox">
            <Select
              v-model="chooseCaseList"
              placeholder="请选择案场"
              @on-change="caseChange"
              :max-tag-count="tagNum" 
              :max-tag-placeholder="maxTagPlaceholder"
              style="min-width: 220px; margin-right: 10px"
            >
              <Option
                v-for="(item, index) in caseList"
                :key="index"
                :value="item.buildingId"
                :label="item.buildingAlias"
              >
              </Option>
              </Option>
            </Select>
          </div>
        </div>
        <div class="chooseText">
          <span
            :class="idx === index ? 'curr' : ''"
            v-for="(item, index) in topData"
            :key="index"
            @click="topChooseClick(index)"
            >{{ item }}</span
          >
          <em style="line-height: 30px; margin-left: 50px"> 自定义：</em
          ><DatePicker
            type="daterange"
            :clearable = 'false'
            @on-change="dataChoose"
            ref="oselect"
            :options="options"
            placeholder="请选择时间"
            style="width: 220px"
          ></DatePicker>
        </div>
        <div class="statistics">
          <div class="statisticsTit">客户来访统计</div>
          <div class="statisticsCon">
            <p class="p1">
              <b style="cursor:pointer" @click="visitorClick(statisticsData.visitorIds)">{{visitorNum}}</b>
              <em>{{dataText}}来客</em>
            </p>
            <p class="p2">
              <span>
                <b style="cursor:pointer" @click="visitorClick(statisticsData.newComerIds)">{{statisticsData.newComerCount}}</b>
                <em>{{dataText}}新客</em>
              </span>
              <span>
                <b style="cursor:pointer" @click="visitorClick(statisticsData.oldComerIds)">{{statisticsData.oldComerCount}}</b>
                <em>{{dataText}}老客</em>
              </span>
            </p>
            <p class="p1">
              <b>{{statisticsData.sendData}}</b>
              <em>置业计划发送</em>
            </p>
            <p class="p1">
              <b>{{infoPerfectData.scale}}</b>
              <em>客户资料完善</em>
            </p>
            <p class="p1">
              <b>{{followUpData.scale}}</b>
              <em>今日到期跟进</em>
            </p>
            <p class="p3" @click="goCustomerVisit">查看<br />更多记录</p> 
          </div>




          
          <div class="statisticsTit">客户信息完善统计</div>
          <div class="statisticsCon">
            <p class="p2 p4">
              <span>
                <b style="cursor:pointer" @click="visitorClick(infoPerfectData.needIds)">{{infoPerfectData.need}}</b>
                <em>{{dataText}}需完善</em>
              </span>
              <span>
                <b style="cursor:pointer" @click="visitorClick(infoPerfectData.notYetIds)">{{infoPerfectData.notYet}}</b>
                <em>{{dataText}}未完善</em>
              </span>
              <span>
                <b>{{infoPerfectData.rate}}</b>
                <em>完善率</em>
              </span>
            </p>
            <p class="p3" @click="goCustomerInfo">查看<br />更多记录</p>
          </div>
          
          <div class="statisticsTit">置业计划书统计</div>
          <div class="statisticsCon">
            <p class="p2 p4">
              <span>
                <b style="cursor:pointer" @click="visitorClick(statisticsData.needSendIds)">{{statisticsData.needSend}}</b>
                <em>{{dataText}}需发送</em>
              </span>
              <span>
                <b style="cursor:pointer" @click="visitorClick(statisticsData.noSendIds)">{{statisticsData.noSend}}</b>
                <em>{{dataText}}未发送</em>
              </span>
              <span>
                <b>{{sendLv}}</b>
                <em>发送率</em>
              </span>
              <span>
                <b style="cursor:pointer" @click="needSendClick(statisticsData.hasReadList)">{{statisticsData.hasRead}}</b>
                <em>{{dataText}}阅读</em>
              </span>
            </p>
            <p class="p3" @click="goOwnershipPlan">查看<br />更多记录</p>
          </div>

          <div class="statisticsTit">客户跟进统计</div>
          <div class="statisticsCon">
            <p class="p2 p4">
              <span>
                <b style="cursor:pointer" @click="visitorClick(followUpData.needIds)">{{followUpData.need}}</b>
                <em>{{dataText}}将到期</em>
              </span>
              <span>
                <b style="cursor:pointer" @click="visitorClick(followUpData.notYetIds)">{{followUpData.notYet}}</b>
                <em>{{dataText}}未跟进</em>
              </span>
              <span>
                <b>{{followUpData.rate}}</b>
                <em>跟进率</em>
              </span>
            </p>
            <p class="p3" @click="goCustomerFollow">查看<br />更多记录</p>
          </div>
        </div>
      </div>
      <div class="exlBox" v-if="consultantPointsFlag">
        <div class="exlBoxTit">顾问积分信息</div>
        <DatePicker
            type="daterange"
            :clearable = 'false'
            @on-change="exlBoxTimeChange"
            ref="oselect"
            placeholder="请选择时间"
            style="width: 220px"
          ></DatePicker>
          <Button type="primary" style="margin-left:10px;" @click="exlBoxImport">导出</Button>
      </div>
      <div class="clearfloat"></div>
    </div>
    <div class="Home_imgs" v-else>
      <img
        class="Home_imgs_img"
        src="https://media.tongcehaofang.com/image/default/862419AB1E47441FB2487629D3871A89-6-2.jpg"
        alt=""
        srcset=""
      />
    </div>
  </div>
</template>

<script>

import {
  getCaseList,
  getCustomerVisit,
  getInfoPerfect,
  getFollowUp,
  getUserIntegralExport
} from "@/api/homeApi.js";
  import {buildExportFormData} from "@/common/axios"
export default {
  components: {},
  data() {
    return {
      customerVisitFlag: JSON.parse(this.$tool.getStorage("customerVisitFlag")),
      consultantPointsFlag:JSON.parse(this.$tool.getStorage("consultantPointsFlag")),
      caseList: [],
      chooseCaseList: "",
      options: {
        disabledDate(date) {
          return (
            date &&
            date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
          );
        },
      },
      topData: ["昨日", "今日", "近七日", "本周", "本月"],
      idx: 1,
      dataCon: "",
      userMess: JSON.parse(this.$tool.getStorage("userMess")),
      startTime: "",
      endTime: "",
      tagNum: 1,
      statisticsData: {},
      visitorNum: "",
      sendLv: "",

      dataChooseTime: ["", ""],
      dataText: "今日",

      infoPerfectData: "",
      followUpData: "",
      exlBoxTime:[],
    };
  },
  computed: {},
  watch: {},
  methods: {
    exlBoxTimeChange(val){
      console.log(val,'exlBoxTime');
      this.exlBoxTime = val;
    },
    
    exlBoxImport(){

      // let params = {
      
      //   startTime: this.exlBoxTime[0],
      //   endTime: this.exlBoxTime[1],
      // };

       let formdata = new FormData();
        formdata.append('startTime',this.exlBoxTime[0]);
        formdata.append('endTime',this.exlBoxTime[1]);

        buildExportFormData("顾问积分统计", '/dt-business/userIntegral/export', formdata);
    },
    //点击来客
    visitorClick(val) {
      console.log(
        val,
        "laikelaikelaikelaikelaikelaikelaikelaikelaikelaikelaikelaikelaike"
      );
      if (val && val.length) {
        // let tark = this.$router.resolve({
        //   path: "/customerManagement_center/allCustomers/index",
        // });
        // window.open(tark.href, '_blank');
        this.$tool.setStorage({
          customerListFormStatistics: JSON.stringify(val),
        });
        console.log(
          this.$tool.getStorage("customerListFormStatistics"),
          "customerListFormStatistics暂无数据。暂无数据。customerListFormStatistics"
        );
        this.$router.push({
          path: "/customerManagement_center/allCustomers/index",
        });
      } else {
        this.$Message.warning("暂无数据。");
      }
    },
    //点击置业
    needSendClick(val) {
      if (val.length) {
        // let tark = this.$router.resolve({
        //   path: "/marketing_center/propertyReport/index",
        // });
        // window.open(tark.href, '_blank');

        this.$router.push({
          path: "/marketing_center/propertyReport/index",
        });

        this.$tool.setStorage({
          needSendsAll: JSON.stringify(val),
        });
      } else {
        this.$Message.warning("没有创建的置业报告。");
      }
    },

    reCustomerVisit() {
      let params = {
        buildingIds: [this.chooseCaseList],
        startTime: this.startTime,
        endTime: this.endTime,
      };

      getCustomerVisit(params)
        .then((res) => {
          console.log(res, "统计总数据");
          this.statisticsData = res;
          this.visitorNum =
            parseInt(this.statisticsData.oldComerCount) +
            parseInt(this.statisticsData.newComerCount);

          if (
            this.statisticsData.needSend == 0 &&
            this.statisticsData.noSend == 0
          ) {
            this.sendLv = "0%";
          } else {
            this.sendLv =
              Math.round(
                ((parseInt(this.statisticsData.needSend) -
                  parseInt(this.statisticsData.noSend)) /
                  parseInt(this.statisticsData.needSend)) *
                  10000
              ) /
                100.0 +
              "%";
          }

          this.reInfoPerfect();
          this.reFollowUp();
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    // 客户信息完善统计
    reInfoPerfect() {
      let params = {
        buildingIds: [this.chooseCaseList],
        startTime: this.startTime,
        endTime: this.endTime,
      };

      getInfoPerfect(params)
        .then((res) => {
          console.log(res, "客户信息完善统计");
          this.infoPerfectData = res;
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    //客户跟进统计
    reFollowUp() {
      let params = {
        buildingIds: [this.chooseCaseList],
        startTime: this.startTime,
        endTime: this.endTime,
      };

      getFollowUp(params)
        .then((res) => {
          console.log(res, "客户跟进统计");
          this.followUpData = res;
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },

    maxTagPlaceholder(num) {
      return "已选择 " + num + "个楼盘";
    },
    //案场列表
    reCaseList() {
      let params = {
        userId: this.userMess.userId,
      };

      getCaseList(params)
        .then((res) => {
          console.log("案场列表", res);
          this.caseList = res.list;
          if (this.$tool.getStorage("caseBuildingId")) {
            console.log(
              "111",
              JSON.parse(this.$tool.getStorage("caseBuildingId"))
            );
            let buildingSome = this.caseList.some((item) => {
              return (
                item.buildingId ==
                JSON.parse(this.$tool.getStorage("caseBuildingId"))
              );
            });
            if (buildingSome) {
              this.chooseCaseList = JSON.parse(
                this.$tool.getStorage("caseBuildingId")
              );
            } else {
              this.chooseCaseList = this.caseList[0].buildingId;
              this.$tool.setStorage({
                caseBuildingId: JSON.stringify(this.chooseCaseList),
              });
            }
          } else {
            this.chooseCaseList = this.caseList[0].buildingId;
            this.$tool.setStorage({
              caseBuildingId: JSON.stringify(this.chooseCaseList),
            });
          }

          this.reCustomerVisit();
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },

    caseChange(val) {
      console.log(val, "caseChange");
      if (val.length > 1) {
        this.tagNum = 0;
      } else {
        this.tagNum = 1;
      }
      this.$tool.setStorage({
        caseBuildingId: JSON.stringify(val),
      });

      this.reCustomerVisit();
    },
    topChooseClick(index) {
      this.idx = index;
      let falg = this.dataChooseTime.some((item) => {
        return item != "";
      });
      if (falg) {
        this.$refs.oselect.handleClear();
      }
      if (index == 0) {
        this.dataText = "昨日";
        var day1 = new Date();
        day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
        var s1 =
          day1.getFullYear() +
          "-" +
          (day1.getMonth() + 1) +
          "-" +
          day1.getDate();
        this.startTime = s1;
        this.endTime = s1;
        console.log(this.startTime, this.endTime, "昨日");
      } else if (index == 1) {
        this.dataText = "今日";
        var day2 = new Date();
        day2.setTime(day2.getTime());
        var s2 =
          day2.getFullYear() +
          "-" +
          (day2.getMonth() + 1) +
          "-" +
          day2.getDate();
        this.startTime = s2;
        this.endTime = s2;
        console.log(this.startTime, this.endTime, "今日");
      } else if (index == 2) {
        this.dataText = "近七日";
        this.startTime = this.$tool.getDayRi(-7);
        this.endTime = this.$tool.getDayRi(0);
        console.log(this.startTime, this.endTime, "近七日");
      } else if (index == 3) {
        this.dataText = "本周";
        this.startTime = this.$tool.getTimeRi(0);
        this.endTime = this.$tool.getTimeRi(-6);
        console.log(this.startTime, this.endTime, "本周");
      } else if (index == 4) {
        this.dataText = "本月";
        // this.startTime = this.$tool.getMonthStartAndEnd(-1)[0];
        // this.endTime = this.$tool.getMonthStartAndEnd(-1)[1];
        this.startTime = this.$tool.getMonthStartAndEnd(0)[0];
        this.endTime = this.$tool.getMonthStartAndEnd(0)[1];
        console.log(this.startTime, this.endTime, "本月");
      }

      this.reCustomerVisit();
    },
    dataChoose(val) {
      this.dataChooseTime = val;
      console.log(val, "riririri");
      let falg = val.some((item) => {
        return item != "";
      });
      if (falg) {
        this.dataText = "累计";
        this.idx = 999;
        this.startTime = val[0];
        this.endTime = val[1];
        this.reCustomerVisit();
      }
    },

    goCustomerVisit() {
      this.$router.push({
        path: "/home/customerVisit",
      });
    },
    goOwnershipPlan() {
      this.$router.push({
        path: "/home/ownershipPlan",
      });
    },
    goCustomerInfo() {
      this.$router.push({
        path: "/home/customerInfo",
      });
    },
    goCustomerFollow() {
      this.$router.push({
        path: "/home/customerFollow",
      });
    },
  },
  created() {
    this.reCaseList();
    var today = new Date();
    today.setTime(today.getTime());
    var todayTime =
      today.getFullYear() +
      "-" +
      (today.getMonth() + 1) +
      "-" +
      today.getDate();
    this.startTime = todayTime;
    this.endTime = todayTime;
  },
  mounted() {},
};
</script>
<style lang='scss' scoped>
.Home {
  padding: 20px;
  &_imgs {
    position: relative;
    &_img {
      width: 600px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translateX(-50%);
    }
  }

  .caseSearch {
    overflow: hidden;
    .caseBox {
      float: left;
    }
  }
  .clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
  .clearfloat {
    zoom: 1;
  }
  .exlBox{
    float:left;
    margin-left:20px;
    .exlBoxTit{
      font-size:14px;
      margin-bottom:10px;
    }
  }
  .allBox {
    border: 1px #dcdee2 solid;
    padding: 20px;
    float: left;
    .chooseText {
      margin-top: 5px;
      height: 40px;
      border-radius: 2px;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      span {
        height: 30px;
        border: #dcdee2 1px solid;
        width: 90px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        margin-right: 5px;
      }
      span.curr {
        border: #2d8cf0 1px solid;
        color: #2d8cf0;
      }
    }

    .statistics {
      .statisticsTit {
        font-size: 16px;
        margin-top: 30px;
        color: #333;
      }
      .statisticsCon {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        p {
          border-right: 1px #dcdee2 solid;
          display: flex;
          flex-direction: column;
          text-align: center;
          padding: 0 20px;
          b {
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }
          em {
            font-size: 14px;
            color: #999;
            margin-top: 10px;
          }
        }
        p.p2 {
          display: flex;
          flex-direction: row;
          span {
            display: flex;
            flex-direction: column;
            margin: 0 10px;
          }
        }
        p.p4 {
          padding: 0;
          span {
            margin: 0;
            width: 104px;
            // border:1px #333 solid;
          }
        }
        p.p3 {
          color: #2d8cf0;
          padding-top: 15px;
          border: none;
          cursor: pointer;
        }
      }
    }
  }
  // .radioTime {
  //   margin-top: 10px;
  // }
}
</style>

